<template>
    <div>
        <BreadCrumb name1="权限管理" name2="角色列表"></BreadCrumb>
        <el-card>
            <el-row>
                <el-col :span="5">
                    <el-button type="primary" @click="AddDialogVisible=true">添加角色</el-button>
                </el-col>
            </el-row>
            <el-table border :data="rolesList" style="width: 100%;overflow-y: scroll;height:350px;margin:10px 0">
                <el-table-column type="expand">
                    <template slot-scope="scoped">
                        <el-row :class="['border-bottom',index1 == 0 ?'border-top':'']" v-for="(item1,index1) in scoped.row.children" :key="index1">
                            <el-col :span="5">
                                <el-tag  closable @close="deleteTag(scoped.row,scoped.row.children[index1])">{{ item1.authName }}</el-tag>
                            </el-col>
                            <el-col :span="19">
                                <el-row :class="['border-bottom',index2 == item1.children.length - 1 ? 'border-none':'']" v-for="(item2,index2) in item1.children" :key="index2">
                                    <el-col :span="11">
                                        <el-tag closable type="success" @close="deleteTag(scoped.row,scoped.row.children[index1].children[index2])">{{ item2.authName }}</el-tag>
                                    </el-col>
                                    <el-col :span="13">
                                        <el-tag closable v-for="(item3,index3) in item2.children" :key="index3" type="warning" @close="deleteTag(scoped.row,scoped.row.children[index1].children[index2].children[index3])">{{ item3.authName }}</el-tag>
                                    </el-col>
                                </el-row>
                            </el-col>
                        </el-row>
                    </template>
                </el-table-column>
                <el-table-column type="index" label="#"></el-table-column>
                <el-table-column prop="roleName" label="角色名称"></el-table-column>
                <el-table-column prop="roleDesc" label="角色描述"></el-table-column>
                <el-table-column  label="操作">
                    <template slot-scope="scoped">
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="getRoleInfo(scoped.row)">编辑</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="deleteRoleInfo(scoped.row)">删除</el-button>
                        <el-button type="warning" size="mini" icon="el-icon-search" @click="allocationRights(scoped.row)">分配权限</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 添加角色对话框 -->
            <el-dialog title="添加角色" :visible.sync="AddDialogVisible" width="30%">
                <el-form ref="AddRolesform" :model="AddRolesForm" label-width="80px">
                    <el-form-item label="角色名称">
                        <el-input v-model="AddRolesForm.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="AddRolesForm.roleDesc"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="AddDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="AddRole">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 编辑已有的角色信息 -->
            <el-dialog title="修改角色" :visible.sync="PutDialogVisible" width="30%">
                <el-form :rules="rules" ref="GetRolesform" :model="GetRoleInfo" label-width="80px">
                    <el-form-item label="角色id" prop="id">
                        <el-input v-model="GetRoleInfo.roleId" disabled></el-input>
                    </el-form-item>
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="GetRoleInfo.roleName" ></el-input>
                    </el-form-item>
                    <el-form-item label="角色描述">
                        <el-input v-model="GetRoleInfo.roleDesc"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="PutDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="putRoleInfo">确 定</el-button>
                </span>
            </el-dialog>
            <!-- 分配权限 -->
            <el-dialog title="分配权限" :visible.sync="RightsDialogVisible" width="50%" @closed="clearDefaultKey">
                <el-tree ref="treeRef" node-key="id" default-expand-all :default-checked-keys="defaultKey" :data="AllRightsList" show-checkbox :props="RightsProps" @getCheckedKeys="getKey(leafOnly)"></el-tree>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="RightsDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="UpdateRights">确 定</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
import BreadCrumb from '@/components/BreadCrumb';//引入面包屑导航
import {Get_AllRolesInfo,Add_OneRolesInfo,Get_OneRoleInfo,Put_OneRoleInfo,Delete_OneRoleInfo,Delete_RoleRight,Update_RightsInfo} from '@/api/roles.js';//引入发送请求用到的接口
import {All_RightsList} from '@/api/rights.js';//引入发送请求用到的接口
    export default {
        data(){
            return{
                rolesList:[],//存储获取所有角色列表数据
                AddDialogVisible:false,//控制添加角色对话框的显示与隐藏
                AddRolesForm:{//添加角色传递的参数
                    roleName:'',
                    roleDesc:''
                },
                PutDialogVisible:false,//控制更改对话框显示隐藏
                RightsDialogVisible:false,//控制分配权限对话框显示隐藏
                GetRoleInfo:{},//存储获取到单个角色数据
                AllRightsList:[],//存储获取所有权限列表
                rules:{//更改数据校验规则
                    id:[
                        { required: true, message: '请输入角色id', trigger: 'blur'}//required必传 message如果未传弹出提示 trigger为blur失去焦点触发
                    ],
                    roleName:[
                        { required: true, message: '请输入角色名称', trigger: 'blur'}//required必传 message如果未传弹出提示 trigger为blur失去焦点触发
                    ]
                },
                RightsProps:{//配置选项
                    children:'children',//指定子树为节点对象的某个属性值
                    label:'authName'//指定节点标签为节点对象的某个属性值
                },
                defaultKey:[],//存放tree绑定的id
                roleId:''//存储角色id
            }
        },
        components:{
            BreadCrumb//注册面包屑导航
        },
        mounted(){
            this.getRolesInfo();//执行获取所有角色列表请求
        },
        methods:{
            // 获取所有角色列表
            async getRolesInfo(){
                const result = await Get_AllRolesInfo();
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message.error('获取数据失败')//返回错误提示框
                }
                this.rolesList = result.data;//将获取到的数据赋值给初始值
                console.log(this.rolesList);
            },
            // 添加角色
            async AddRole(){
                if(this.AddRolesForm.roleName == '' && this.AddRolesForm.roleDesc == ''){//判断角色姓名和角色描述是否为空
                    return this.$message.error('请填写完整信息');//为空弹出错误提示框
                }
                console.log(this.AddRolesForm);
                const result = await Add_OneRolesInfo({//发送添加角色请求
                    method:'post',//请求方式
                    url:'roles',//请求路径
                    data:this.AddRolesForm//请求参数
                })
                console.log(result);
                if(result.meta.status != 201){//如果状态码不为201
                    return this.$message.error('添加失败')//弹出错误提示框
                }
                this.$message.success('提交成功');//否则弹出成功提示框
                this.AddDialogVisible = false;//当前控制对话框为隐藏
                this.AddRolesForm.roleName = '';//清空初始值
                this.AddRolesForm.roleDesc = '';//清空初始值
                this.getRolesInfo();//重新获取所有角色列表
            },
            // 获取单个角色
            async getRoleInfo(info){
                this.PutDialogVisible = true;//将控制更改的对话框显示
                console.log(info);
                const GetResult = await Get_OneRoleInfo(info.id);//发送获取单个角色数据请求
                console.log(GetResult);
                if(GetResult.meta.status != 200){//如果状态码不为200
                    return this.$message.error('获取不到数据')//返回一条错误提示框
                }
                this.GetRoleInfo = GetResult.data;//将获取到的数据赋值给初始值
            },
            // 修改角色
            async putRoleInfo(){
                if(this.GetRoleInfo.roleName == '' && this.GetRoleInfo.roleDesc == ''){//如果角色名字和角色描述为空
                    return this.$message.error('请填写完整 在提交')//返回提示框
                }
                const PutResult = await Put_OneRoleInfo({//发送更改请求
                    method:'put',//请求方式
                    url:`roles/${this.GetRoleInfo.roleId}`,//请求路径
                    data:{//请求参数
                        id:this.GetRoleInfo.roleId,
                        roleName:this.GetRoleInfo.roleName,
                        roleDesc:this.GetRoleInfo.roleDesc
                    }
                })
                console.log(PutResult);
                if(PutResult.meta.status != 200){//如果状态码不为200
                    return this.$message({//返回错误提示框
                        message:'修改失败',
                        type:'error'
                    })
                }
                this.$message.success('修改成功');//如果成功弹出成功提示框
                this.GetRoleInfo = PutResult.data;//将获取到的数据赋值给绑定初始值
                this.$refs.GetRolesform.resetFields();//清空form
                this.PutDialogVisible = false;//将更改对话框隐藏
                this.getRolesInfo();//再次执行获取所有数据请求 更新页面数据
            },
            // 删除角色
            async deleteRoleInfo(info){
                console.log(info);//info为scoped.row
                const confirmResult = await this.$confirm("此操作将永久删除该角色信息，是否继续？","提示",{//点击时弹出确认框
                    confirmButtonText:'确定',//确定按钮文字
                    cancelButtonText:'取消',//取消按钮文字
                    type:'warning'//类型为警告
                }).catch(err=>err);//catch捕捉错误信息 使代码不会报错
                console.log(confirmResult);//值为confirm cancel
                if(confirmResult == 'confirm'){//如果值为confirm
                    const result = await Delete_OneRoleInfo(info.id);//发送删除的请求
                    console.log(result);
                    if(result.meta.status != 200){//如果状态码不为200
                        return this.$message.error('删除失败')//返回错误提示框
                    }
                    this.$message({//否则弹出成功提示框
                        message:'删除成功',
                        type:'success'
                    })
                    this.getRolesInfo();//再次执行获取所有数据请求更新页面
                }
            },
            // 删除权限标签
            async deleteTag(Roleinfo,Rightinfo){
                const confirmResult = await this.$confirm("该操作将永久删除该权限","提示",{//点击时弹出确认框
                    confirmButtonText:'确认',//确定按钮文字
                    cancelButtonText:'取消',//取消按钮文字
                    type:'warning'//类型为警告
                }).catch(err=>err);//catch捕捉错误信息 使代码不会报错
                console.log(confirmResult);//值为confirm cancel
                if(confirmResult == 'confirm'){//如果值为confirm
                    console.log(Roleinfo,Rightinfo);//roleInfo为角色信息 rightInfo为当前点击的权限信息
                    const roleId = Roleinfo.id;//将角色id获取到
                    const rightId = Rightinfo.id;//将权限id获取到
                    const result = await Delete_RoleRight(roleId,rightId);//放松请求
                    console.log(result);
                    if(result.meta.status != 200){//如果状态码不为200
                        return this.$message.error('删除失败')//返回错误提示框
                    }
                    this.$message.success('删除成功');//否则弹出成功提示框
                    Roleinfo.children = result.data;//重新赋值
                }
            },
            // 分配权限
            async allocationRights(info){//info为接收过来的当前行元素信息
                this.roleId = info.id;//将改行id存储起来
                this.RightsDialogVisible = true;//控制当前对话框显示
                console.log(info);
                const result = await All_RightsList({//发送请求 获取所有权限列表 树状数据
                    method:'get',//请求方式
                    url:'rights/tree'//请求路径
                });
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message({//返回错误提示框
                        message:'数据获取失败',
                        type:'error'
                    })
                }
                this.AllRightsList = result.data;//将数据存储起来
                this.getKey(this.defaultKey,info);//调用getKey方法 参数一是空数组 参数二是当前行元素
            },
            // 设置树形控件的自动选中状态
            getKey(Arr,RightList){//Arr:空数组
                // console.log(Arr);//空数组
                // console.log(RightList);//当前行数据
                if(!RightList.children){//如果在当前元素中查找不到children 要判断的是第三级的children id
                    // console.log(Arr);
                    return Arr.push(RightList.id)//添加到空数组中
                }
                RightList.children.forEach((el)=>{//如果在当前元素中找到了children 遍历当前行元素的children 
                    // console.log(el);//el为children的每一项
                    this.getKey(Arr,el);//递归函数自己调用自身 el为children的每一项
                })
            },
            // 清除数组数据
            clearDefaultKey(){
                this.RightsDialogVisible = false;
                this.defaultKey = [];
            },
            // 修改权限数据
            async UpdateRights(){
                const Ids = this.$refs.treeRef.getCheckedKeys().concat(this.$refs.treeRef.getHalfCheckedKeys()).join(',');//getCheckedKeys()获取选中的node-key getHalfCheckedKeys()获取半选的node-key
                console.log(Ids);
                const result = await Update_RightsInfo({//发送请求
                    method:'post',//请求方式
                    url:`roles/${this.roleId}/rights`,//请求路径
                    data:{//请求参数
                        roleId:this.roleId,
                        rids:Ids
                    }
                });
                console.log(result);
                if(result.meta.status != 200){//如果状态码不为200
                    return this.$message({//弹出错误提示框
                        message:'修改失败',
                        type:'error'
                    })
                }
                this.$message({//否则弹出成功提示框
                    message:'修改成功',
                    type:'success'
                });
                this.getRolesInfo();//更新数据
                this.RightsDialogVisible = false;//隐藏当前对话框
            }
        }   
    }
</script>

<style lang="scss" scoped>
.el-tag{
    margin:10px;
}
.border-top{
    border-top:1px solid #EBEEF5;
}
.border-bottom{
    border-bottom:1px solid #EBEEF5;
}
.border-none{
    border:none;
}
</style>